<template>
	<view class="page">

		<custom-navigation title="出入库明细">
		</custom-navigation>

		<view class="flex-row-center"
			style="background-color: #38C09EFF;padding-top: 20rpx;padding-left: 24rpx;padding-bottom: 22rpx;">
			<view class="search-box flex-row-center" @click="showPicker=true">
				<view class="input" v-model="searchStr">{{start_time.length==0?'请选择时间':start_time+'至' +end_time}}</view>
				<image src="/static/rili.png" ></image>
			</view>
			<view class="fliter-box"  @click="$navigateTo('/pages/report/in-out-filter')">
				<image src="/static/filter.png"></image>
				<text>筛选</text>
			</view>
		</view>
		<scroll-view v-if="datas && datas.length" class="body-scroll" scroll-y="true" @scrolltolower="loadMoreData">
		 
			<view class="item-view flex-column" v-for="(item,index) in datas" @click="itemOnClick(item)">

				<view class="flex-row-center" style="margin-bottom: 20rpx;">
					<view class="lable"  > 单号：</view>
					<view class="value">{{item.bill_no}}</view>
				</view>
				<view class="flex-row-center" style="margin-bottom: 20rpx;">
					<view class="lable"  > 商品名称：</view>
					<view class="value">{{item.goods_name_str}}</view>
				</view>
			 
			 <view class="flex-row-center" style="margin-bottom: 20rpx;">
			 	<view class="lable"  > 单据数量：</view>
			 	<view class="value">{{item.bill_num}}</view>
			 </view>
			 <view class="flex-row-center" style="margin-bottom: 20rpx;">
			 	<view class="lable"  > 结余数量：</view>
			 	<view class="value">{{item.balance_num}}</view>
			 </view>
					
				<view class="flex-row-center" style="margin-bottom: 20rpx;">
					<view class="lable">操作类型：</view>
					<view class="value">{{item.operation_type}}</view>
				</view>

				<view class="flex-row-center">
					<view class="lable">操作时间：</view>
					<view class="value">{{item.submit_time}}</view>
				</view>
 
			</view>
		</scroll-view>
		<view v-else>
			<view v-if="datas" class="nodata">暂无数据</view>
		</view>
		<mx-date-picker :show="showPicker" type="range" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				datas: null,
				page: 1,
				searchStr: '',
				stats_data: {},
				start_time: '',
				end_time: '',
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: '',
				relation_condition: {}
			}
		},
		onLoad() {
			this.getData()
		},	
		onShow() {
			let relation_condition = uni.getStorageSync("relation_condition")
			if (relation_condition) {
				this.relation_condition = relation_condition
				uni.setStorageSync("relation_condition", null) 
				this.page = 1
				this.getData()
			}
		},
		methods: {
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value; 
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);

					this.start_time = e.value[0].replaceAll("/", "-")
					this.end_time = e.value[1].replaceAll("/", "-")
					this.page = 1;
					this.getData()
				}
			},
			itemOnClick(item) {
				let info = JSON.stringify(item)

				this.$navigateTo('/pages/report/in_out_detail?info=' + info)
			},
			tabSwitch(index) {
				this.tabindex = index;
				this.page = 1;
				this.getData(index);
			},
			doSearch() {
				this.page = 1;
				this.getData(this.tabindex)
				this.getCounts()
			},
			loadMoreData() {
				this.page++;
				this.getData(this.tabindex)
			},
			getData() {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/select/srvretail_in_out_stock_select", {
					"serviceName": "srvretail_in_out_stock_select",
					"colNames": [
						"*"
					],
					"condition": this.end_time.length == 0 ? [] : [{
						"colName": "submit_time",
						"value": this.start_time,
						"ruleType": "ge"
					}, {
						"colName": "submit_time",
						"value": this.end_time + " 23:59",
						"ruleType": "le"
					}],
					relation_condition:this.relation_condition,
					"page": {
						"pageNo": this.page,
						"rownumber": 10
					}
				}).then(res => {
					uni.hideLoading()
					if (res.state == "SUCCESS") {
						this.stats_data = res.stats_data
						if(this.page==1)
						this.datas = res.data;
						else{
							if(res.data.length==0){
								this.$showToast("没有更多数据了！")
							}
							this.datas.push(...res.data)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nodata {
		position: absolute;
		width: 100%;
		top: 50%;
		text-align: center;
		color: #999999;
	}
	.fliter-box {
		margin-right: 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.search-box {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;


		.input {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			margin-left: 28rpx;
			color: #999999
		}
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 39rpx; 
		}
	}

	.tab-box {
		height: 100rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		justify-content: center;
		padding-left: 72rpx;
		padding-right: 72rpx;

		.item {
			padding-top: 32rpx;
			flex: 1;

			.bubble {

				min-width: 24rpx;
				height: 24rpx;
				background: rgba(212, 48, 48, 1);
				color: white;
				font-size: 20rpx;
				line-height: 24rpx;
				border-radius: 12rpx;
				font-weight: 500;
				text-align: center;
				top: -13rpx;
				right: -20rpx;
				position: absolute;

			}

			.unchecktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.checktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}

			.in {
				margin-top: 4rpx;
				width: 48rpx;
				height: 6rpx;
				background-color: rgba(56, 192, 158, 1);
				;
				border-radius: 3rpx;
			}
		}
	}

	.stats-box {
		width: 702rpx;
		opacity: 1;
		border-radius: 12rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);

		.title-box {
			color: rgba(47, 47, 47, 1);
			font-size: 36rpx;
			font-weight: 700;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}
		}


		.ir-box {
			flex-wrap: wrap;
			display: flex;

			.ir {
				margin-top: 20rpx;
				width: 308rpx;
				height: 78px;
				border-radius: 12rpx;
				border: 2rpx solid rgba(227, 227, 227, 1);
				justify-content: center;

				.text1 {
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(255, 150, 46, 1);

					image {
						margin-left: 8rpx;
						height: 32rpx;
						width: 32rpx;
					}
				}

				.text2 {
					margin-top: 8rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(47, 47, 47, 1);
				}
			}
		}
	}

	.item-view {
		padding: 24rpx;
		width: 702rpx;
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);
		position: relative;

		.lable {
			font-size: 30rpx;
			color: rgba(0, 0, 0, 1);
		}

		.value {
			margin-left: 8rpx;
			font-size: 30rpx;
			color: rgba(153, 153, 153, 1);
		}

		.amount {
			font-size: 40rpx;
			font-weight: 700;
			top: 88rpx;
			color: rgba(226, 36, 23, 1);
			position: absolute;
			right: 24rpx;
			padding: 0;
			margin: 0;
		}
	}
</style>
